{% extends 'project/layout.html' %}
{% load static %}
{% block title %}
问题详情
{% endblock%}
{% block css%}
<link rel="stylesheet" href="{% static 'plugin/md-master/css/editormd.css' %}">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet">
<style>
  .issue-content{
    display: flex;
    justify-content: space-around;
  }
  .issue-content .panel{
    width: 45%;
  }
   .comment-area .item {
            margin-top: 20px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .comment-area .right-info {
            padding-left: 35px;
        }

        .comment-area .right-info .desc .msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .comment-area .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }
        .reply{
            cursor: pointer;
        }
</style>

{% endblock %}
{% block content %}
  <div class="issue-content">
    <!-- 修改问题   -->
    <div class="panel panel-success">
      <div class="panel-heading">更新问题</div>
      <div class="panel-body">
       <form novalidate id="form" class="form-horizontal">
                {% csrf_token %}
                 <div class="form-group">
                        <label for="{{form.issues_type.id_for_label}}" class="col-sm-2 control-label">{{form.issues_type.label}}</label>
                        <div class="col-sm-10">
                          {{form.issues_type}}
                        </div>
                 </div>
                <div class="form-group">
                        <label for="{{form.subject.id_for_label}}" class="col-sm-2 control-label">{{form.subject.label}}</label>
                        <div class="col-sm-10">
                          {{form.subject}}
                        </div>
                </div>
                <div class="form-group">
                        <label for="{{form.module.id_for_label}}" class="col-sm-2 control-label">{{form.module.label}}</label>
                        <div class="col-sm-10">
                          {{form.module}}
                        </div>
                </div>
                <div class="form-group">
                        <label for="{{form.desc.id_for_label}}" class="col-sm-2 control-label">{{form.desc.label}}</label>
                        <div class="col-sm-10">
                          <div id="editor">
                              {{form.desc}}
                          </div>
                        </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.status.id_for_label}}" class="col-sm-2 control-label">{{form.status.label}}</label>
                        <div class="col-sm-10">
                          {{form.status}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.priority.id_for_label}}" class="col-sm-2 control-label">{{form.priority.label}}</label>
                        <div class="col-sm-10">
                          {{form.priority}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.assign.id_for_label}}" class="col-sm-2 control-label">{{form.assign.label}}</label>
                        <div class="col-sm-10">
                          {{form.assign}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.attention.id_for_label}}" class="col-sm-2 control-label">{{form.attention.label}}</label>
                        <div class="col-sm-10">
                          {{form.attention}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.start_date.id_for_label}}" class="col-sm-2 control-label">{{form.start_date.label}}</label>
                        <div class="col-sm-10">
                          {{form.start_date}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.end_date.id_for_label}}" class="col-sm-2 control-label">{{form.end_date.label}}</label>
                        <div class="col-sm-10">
                          {{form.end_date}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.mode.id_for_label}}" class="col-sm-2 control-label">{{form.mode.label}}</label>
                        <div class="col-sm-10">
                          {{form.mode}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.parent.id_for_label}}" class="col-sm-2 control-label">{{form.parent.label}}</label>
                        <div class="col-sm-10">
                          {{form.parent}}
                        </div>
                    </div>
                </div>
            </form>
      </div>
    </div>
    <!-- 问题记录   -->
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">操作记录</h3>
      </div>
      <div class="panel-body comment-area">
                    <!--操作记录-->
                    <div class="comment-list" id="comments-id">

                    </div>
                    <hr/>
                    <div class="comment-text" id="commentText">
                        <div class="form-group">
                            <textarea id="content" rows="6" class="form-control" placeholder="请输入要回复的内容"></textarea>
                            <span class="error-msg"></span>
                        </div>
                        <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交">
                        <div class="reply-user hide" id="replyUser">
                            回复 <span id="reply-name"></span>
                            <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>
                        </div>
                    </div>
                </div>
      </div>
  </div>

{% endblock%}

{% block js %}
<script src="{% static 'plugin/md-master/editormd.js' %}"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/i18n/defaults-zh_CN.min.js"></script>
<script>
//初始化编辑器为markdown编辑器
    function initEditor(){
        EDITOR=editormd('editor',{
            placeholder : ' 请输入内容',
            height :500,
            path:'{% static "plugin/md-master/lib/" %}',
            // imageUpload:false,
            // imageFormats : ['jpg','jpeg','png','gif'],
            imageUploadURL:'{% url "web:wiki_upload" project_id=request.tracer.project.id %}',
            toolbarIcons:()=>{
              return ['bold','hr','del','italic','quote','||','save']
            },
            toolbarCustomIcons:{
              save:'<input id="saveB" type="button" class="btn btn-success btn-sm" value="保存" onclick="save()"></<input>'
            },
            imageUpload    : true,
            crossDomainUpload : false,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // imageUploadURL : "./php/upload.php",
        })

    }
    initEditor()
    //保存按钮
    function save(){
        //获取markdown的内容
        let data={
            desc:EDITOR.getValue()
        }
        // console.log(data)
        //发送ajax请求

    }
    // document.addEventListener("DOMContentLoaded",()=>{
    //     save()
    // })
    //初始化问题记录
    async function initRecord(){
        const res = await http({
            url : '{% url "web:issue_record" project_id=request.tracer.project.id issue_id=id %}',
            method : 'get'
        })
        // const data = await res.json()


        if(res.code==200){
            for(let item of res.data){

                let divStr=`
                <div id="issuereply_${item.id}">
                    <div class="item clearfix">
                        <div class="left-avatar">${item.creator}</div>
                        <div class="right-info">
                            <pre>${item.content}</pre>
                            <div class="desc">
                                <div class="msg">
                                    <i class="fa fa-bullhorn" aria-hidden="true"></i>
                                    <span class="type">${item.reply_type}</span>
                                </div>
                                <div class="msg">
                                    <i class="fa fa-user-o" aria-hidden="true"></i>
                                    <span class="user">${item.creator}</span>
                                </div>
                                <div class="msg">
                                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                                    <span class="date" >${item.datetime}</span>
                                </div>
                                <a class="reply" data-id="${item.id}" data-name="${item.creator}" >
                                    <i class="fa fa-commenting-o" aria-hidden="true"></i>回复
                                </a>
                            </div>
                        </div>
                        <div class="child">
                        </div>
                    </div>
            </div>
            `
            document.querySelector('#comments-id').insertAdjacentHTML('beforeend',divStr)

          }
            replycirl()
        }else{
            alert('初始化问题记录表失败!')
        }
    }
    initRecord()
    //回复评论
    function replycirl(){
        const replys=document.querySelectorAll('.reply')

        for (let item of replys) {
            item.addEventListener('click',(e)=>{
                // e.preventDefault()
                let id=e.target.dataset.id
                let name=e.target.dataset.name

                document.querySelector('#replyUser').classList.remove('hide')
                document.querySelector('#reply-name').innerText = name
                document.querySelector('#reply-name').dataset.id=id
                document.querySelector('#content').focus()
            })
        }
    }
    // 取消回复人
    function cancleReply(){
         const replyBtn=document.querySelector('#replyUser')
        replyBtn.addEventListener('click', ()=>{
            document.querySelector('#reply-name').innerText = ''
            document.querySelector('#reply-name').dataset.id=''
            replyBtn.classList.add('hide')
        })
    }
    cancleReply()
    //提交评论
    function subCommit(){
        const subBtn=document.querySelector('#btnSubmit')
        subBtn.addEventListener('click', async () => {
            let reply_id=document.querySelector('#reply-name').dataset.id
            let content=document.querySelector('#content').value
            // console.log(content)
            if(!content) return alert('评论内容不能为空!')
            let id='{{id}}'
            const data={
                content
            }
            if(reply_id){
                data.reply = reply_id
            }
            const res= await http({
                url :'{% url "web:issue_record" project_id=request.tracer.project.id issue_id=id %}',
                method : 'POST',
                data
            })
            if(res.code==200){
                location.reload()
            }else{
                alert('发表评论失败.')
            }
        })
    }
    subCommit()
    //绑定change事件
    function bindChange(){
        let inputs=document.querySelectorAll('.form-control')
        for(let item of inputs){
            item.addEventListener('change',async (e)=>{
                let key_name=e.target.getAttribute('name')
                let key_value=e.target.value
                let data={
                    name:key_name,
                    value:key_value
                }
                // console.log(data)
                const res=await http({
                    method : 'POST',
                    url:'{% url "web:issue_change" project_id=request.tracer.project.id issue_id=id %}',
                    data
                })
                if(res.code===200){
                    location.reload()
                }else{
                    alert(res.error)
                }
            })
        }
    }
    bindChange()
</script>
{% endblock%}